<template>
  <div class="box">
    <!-- <h2>{{this.$store.state.count}}</h2> -->

    <p>
      <van-button type="default" class="btn">注册</van-button>
      <van-button type="default" class="btn" to="/login">登录</van-button>
    </p>

    <van-cell-group>
      <van-field
        v-model="phone"
        clearable
        placeholder="手机号/邮箱"
        :error-message="ii"
        ref="ipt1"
        @blur="shu()"
      >
        <span ref="sp"></span>
      </van-field>
      <div style="border:0.5px solid #000"></div>

      <van-field v-model="sms" center clearable placeholder="验证码" class="ipt2" ref="yan">
        <van-button slot="button" size="small" type="primary" @click="yan()" >获取验证码</van-button>
      </van-field>
      <div style="border:0.5px solid #000"></div>
      <van-field
        v-model="username"
        :error-message="ss"
        @blur="ru()"
        placeholder="密码（6位或以上）"
        ref="ipt2"
      />
      <div style="border:0.5px solid #000"></div>
    </van-cell-group>

    <van-button type="primary" size="large" class="btn-l" @click="zhu()">注册</van-button>

    <span class="tes">
      注册表示同意
      <a @click="top">相关协议</a>及
      <a @click="top1()">隐私条款</a>
    </span>

    <router-view></router-view>
  </div>
</template>

<script>
  import qs from "Qs";
  import axios from "axios";

  export default {
  name: "Redister",
  data() {
    return {
      flag: false,
      flag1: false,
      username: "",
      phone: "",
      sms: "",
      ii: " ",
      ss: " ",
      fa: false,
      fb:false

    };
  },
  methods: {
    top() {
      this.$router.push("/uptl");
    },
    top1() {
      this.$router.push("/pcle");
    },
    shu() {
      let _this = this;
      let a = /^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/;
      let b = /^([A-Za-z0-9_\-\.])+\@([qq|163|126])+\.(com|cn|com\.cn)$/;

      if (
        a.test(_this.$refs.ipt1.value) != true &&
        b.test(_this.$refs.ipt1.value) != true
      ) {
        _this.ii = "手机号或邮箱输入错误";
      } else {
        this.fa = true;
        _this.ii = "输入正确";
      }
    },
    ru() {
      let a = /\S{6,12}/;
      if (a.test(this.$refs.ipt2.value) != true) {
        this.ss = "密码必须是6到12位";
      } else {
        this.ss = " ";
        this.fb = true;
      }
    },
    yan(){
       
      this.$refs.yan.value= parseInt(Math.random()*10000) 
    },
    zhu() {
      if (this.fa == false || this.fb==false) {
        alert("请输入正确格式");
      } else {
        
        console.log(this.$refs.ipt2.value, this.$refs.ipt1.value);
        var _this = this;
        axios({
          method: "post",
          url: "http://10.8.158.3:8080/sportapp/register.do",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },

          data: qs.stringify({
            username: _this.$refs.ipt1.value,
            password: _this.$refs.ipt2.value
          })
        }).then(function(res) {
          console.log(res.data);
          _this.$router.push('/rend')
        });
      }
    }
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  overflow: hidden;
  
  padding: 170px 20px 0 20px;
 
  box-sizing: border-box;
  font-size: 18px;
}
.box p {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
}
.box p .btn {
  border: none;
  font-size: 24px;
}
.box .btn-l {
  margin: 40px 0 0 0;
  font-size: 20px;
}
.box .tes {
  text-align: center;
  margin-top: 30px;
  display: inline-block;
  width: 100%;
}
.tes a {
  text-decoration: underline;
}
</style>
